<%@page import="com.wzqj.agent.common.ConfigHelper"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<jsp:include page="../common/import.jsp" flush="true"></jsp:include>
<%-- <script src="${base}/agent/public/js/map.js"></script> --%>
<!--引用百度地图API-->
<style type="text/css">
   html,body{margin:0;padding:0;}
   .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
   .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ConfigHelper.getProperty("BAIDU_KEY")%>"></script>

</head>

<body>
<jsp:include page="../common/header.jsp" flush="true"></jsp:include>


<div class="clear container pt20">
    <h1 class="fl h30 lg30 p5 pl10 c000 f20">门店编号(mcode)：${store.mcode}</h1>
    <a href="${base}/agent/merchant/merchantList.xhtml" class="fr h20 p5 w50 m5 bg1eb9ef cfff b-radius tc"><span class="vm">返回</span></a>
</div>


<div class="p20">
	<div class="container b bgfff b-radius pb50">
    	<div class="p20">
        	<div class="clear">
            	 <button class="fr bg1eb9ef cfff p5 b-radius w60" onclick="toEdit('${store.storeId}')"><span class="iconfont">&#xf0168;</span>&nbsp;编辑</button> 
                <h2 class="bb lg30 h30 f18 c000 pb5">基本信息</h2>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">店铺名称：</div>
                <div class="fl">${store.name}</div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">店铺电话：</div>
                <div class="fl">${store.tel}</div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">店铺地址：</div>
                <div class="fl">
                	<p>${store.address.province}${store.address.city}${store.address.area}${store.address.address_detail}</p>
                	<!-- user for geo2location -->
	                <input id="province" type="hidden" name="province" value="${store.address.province}">
	                <input id="city" type="hidden" name="city" value="${store.address.city}">
	                <input id="area" type="hidden" name="area" value="${store.address.area}">
	                <input id="address_detail" type="hidden" name="address_detail" value="${store.address.address_detail}">
	                <input id="location" type="hidden" name="location" value="${store.address.location}">
	                
	                <input id="fcity" type="hidden" name="fcity" value=""/>
	                <input id="farea" type="hidden" name="farea" value=""/>
	                
	                <input type="hidden" id="uid" name="uid" value=""/>
	                <input type="hidden" id="id" name="id" value=""/>
	                <input type="hidden" id="from" name="from" value=""/>
	                
	                <input type="hidden" class="input10" name="addressDetail" id="addressDetail" value="">
	                
	    	    	<!-- 地图组件 -->
		        	<div class="map_main" id="mapdiv" style="width:700px !important;height:320px !important;margin-top: 20px;"></div>
		            <script type="text/javascript">
		            (function(){
		            		
		            	//根据位置定位标注
		        		var locatio = ${store.address.location};
		        		var loc = locatio+",";
		        		var xy = loc.split(',');
		        		var x = xy[0];
		        		var y = xy[1];
		             	var city = $("#city").val();
		             	var area = $("#area").val();
		             	var address_detail = $("#address_detail").val();
		             	if (x!=null||y!=null) {
				            // 百度地图API功能
				            // 创建Map实例
			            	var map = new BMap.Map("mapdiv");    
			        		//定义一个中心点坐标
			             	var point = new BMap.Point(x, y);
			             	//设定地图的中心点和坐标并将地图显示在地图容器中
			             	map.centerAndZoom(point, 15);   
			             	 //创建标注	
			             	var marker = new BMap.Marker(point);
			             	//跳动的动画
			             	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
			             	//将标注添加到地图中
			             	map.addOverlay(marker);  
			             	map.setCenter(point); 
						}
		            	})();
		            </script>
                </div>
            </div>
            
            <h2 class="bb lg30 h30 f18 c000 pb5 mt20">联系人信息</h2>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">所属行业：</div>
                <div class="fl">${store.bizClassify[0].name}${store.bizClassify[0].childClassify.name}
                <c:if test="${store.bizClassify[0].childClassify.childClassify[0].name}">${store.bizClassify[0].childClassify.childClassify[0].name}</c:if>
                </div>
                
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">负责人姓名：</div>
                <div class="fl">${store.contactUser.name}</div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">负责人电话：</div>
                <div class="fl">${store.contactUser.phone}</div>
            </div>
            
            <h2 class="bb lg30 h30 f18 c000 pb5 mt20">资质认证</h2>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">营业执照：</div>
                <div class="fl h150 b w300"><img src="${store.busiLicense}" width="300" height="150"></div>
            </div>
            
            <div class="lg30 clear mt10">
            	<div class="fl w200 tr c000 fb">门店照片：</div>
                	<div class="fl" style="width:900px">
		            	<c:forEach items="${store.busiImgs}" var="busImg">
		                	<img class="fl" src="${busImg}" width="300" height="150">
		            	</c:forEach>
                	</div>
            </div>
            
            <div class="clear mt50">
            	<button id="add_en_btn" class="fr bg1eb9ef cfff p5 b-radius w100"><span class="iconfont f12">&#xf0175;</span>&nbsp;添加设备</button>
                <h2 class="bb lg30 h30 f18 c000 pb5">设备&nbsp;&nbsp;(已绑定<span class="c1eb9ef">${store.posListSize}</span>台POS）</h2>
            </div>
        	<c:forEach items="${store.posList}" var="pos" varStatus="Status">
	            <div class="lg30 clear mt10">
	            	<div class="fl w200 tr c000 fb">设备En号：</div>
	                <div class="fl">${pos.en}</div>
	            </div>
        	</c:forEach>
            
            <div id="add_en" class="lg30 clear mt10">
                <div class="fl w200 tr c000 fb">新增设备En号：</div>
                <div class="fl">
                    <input class="h20 p5 w400" type="text">
                    <div class="tc pt30 cfff">
                        <button class="bg1eb9ef p5 w100 b-radius" onclick="bindDevice()">保存</button>
                        <button class="bga0 p5 w100 b-radius ml30">取消</button>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>
<input id="mcode" name="mcode" value="${store.mcode}" hidden="true">

<jsp:include page="../common/footer.jsp" flush="true"></jsp:include>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
});
//跳转到修改店铺页面
function toEdit(storeId){
	window.location.href="${base}/agent/store/toEdit.xhtml?storeId="+storeId;
}

/* 
 
   备用代码
 
 //根据位置定位标注
	$("#markBtn").click(function () {
		//var province = $("#province").val();
	 	var city = $("#city").val();
	 	var area = $("#area").val();
	 	var detail = $("input[name='addressDetail']").val();
	 	if (!province || !city || !area || !detail) {
	     	alert('请输入店铺地址后再进行标记');
	     	return;
	 	}
	 	$("#markBtn").val('标记中...');
	 	$("#markBtn").prop({disabled: true});
	 	$.ajax({
	     	url: "${absUrl}public/location2Geo",
	     	type: "POST",
	     	data: {
				city: city,
				area: area,
				detail: detail
	     	},
	     	dataType: "json",
	     	success: function (data) {
				alert(data.info);
				if (data.status == 0) {
					// 标注地图
					map.clearOverlays();
					//var locations = data.data.split(",");//lng+","+lat
					//定义一个中心点坐标
	             	var point = new BMap.Point(data.data.lng, data.data.lat);
	             	//设定地图的中心点和坐标并将地图显示在地图容器中
	             	map.centerAndZoom(point, 15);   
	             	//创建标注	
	             	var marker = new BMap.Marker(point);
	             	//跳动的动画
	             	marker.setAnimation(BMAP_ANIMATION_BOUNCE);
	             	//将标注添加到地图中
	             	map.addOverlay(marker);  
	             	map.setCenter(point);
					//记录一下经纬度
	            	$("#lng").val(data.data.lng);
	             	$("#lat").val(data.data.lat);
	         	} else {
	             	map.clearOverlays();
	         	}
	         	$("#markBtn").val('在地图上标记');
	         	$("#markBtn").prop({disabled: false});
	     	},
	     	error: function (data) {
	         	art.dialog('服务端报错' + data.status);
	         	$("#markBtn").val('在地图上标记');
	         	$("#markBtn").prop({disabled: false});
	     	}
	 	});
	});
 */
//添加en号保存/取消按钮功能实现
$('#add_en_btn').click(function(){
	$('#add_en').animate({height:150});
});

$('#add_en button').click(function(){
	$('#add_en').animate({height:0});
});
//绑定设备
function bindDevice(){
	var mcode = $('#mcode').val();
	var en = $('#add_en input').val();
	//alert("en:"+en);
	if (en.length!=8) {
		alert("请输入8位格式的en号");
		return;
	}
	var url = "${base}/agent/device/bindDevice.xhtml";
	var data = {'mcode':mcode,'en':en};
	$.ajax({
		url: url,
		type: "POST",
		data: data,
		dataType: "JSON",
		success: function (data) {
        	alert(data.info);
	        location.reload(true);//刷新页面
        },
        error: function (data) {
            alert('服务端报错，' + data.status);
        }
	}); 
}
</script>



</body>
</html>